<template>
  <div style="background-color: #FFFFFF; width: 100%; height: 100%; padding: 15px;">
    <div style="margin-left: 26px; font-size: 13px; font-weight: bold;">
      <span>电流折线图</span>
    </div>
    <div style="margin-left: 20px;margin-top: 20px;  ">
      <a-row :gutter="16">
        <a-col :span="6">
          <j-dict-select-tag
            style="width: 100%"
            placeholder="请选择公司"
            v-model="selectQuery.company"
            dictCode="crm_company,name,id"
            disabled
          />
        </a-col>
        <a-col :span="6">
          <j-dict-select-tag
            style="width: 100%"
            placeholder="请选择车间"
            v-model="selectQuery.workshop"
            dictCode="workshop"
          />
        </a-col>
        <a-col :span="6">
          <j-dict-select-tag
            style="width: 100%"
            placeholder="请选择工序"
            v-model="selectQuery.productCategory"
            dictCode="product_category"
          />
        </a-col>

        <a-col :span="6">
          <a-select
            style="width: 100%"
            placeholder="请选择机台"
            v-model="selectQuery.deviceNo"
            :key="selectQuery.productCategory"
          >
            <a-select-option v-for="(item,index) in deviceList"  :key="index" :value="item.deviceNo">
              {{ item.workingProcedure_dictText }}{{ item.deviceNo }}
            </a-select-option>
          </a-select>
        </a-col>

<!--        <a-col :span="14">
          <RangePicker v-model="queryTime" @change="onChange"></RangePicker>
        </a-col> -->

        <a-col :span="2">
          <a-button @click="onSearch" type="primary" >
            查询
          </a-button>
        </a-col>
      </a-row>

      <div>
        <div ref="lineEchart" class="graph"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { getAction } from '@/api/manage'

import RangePicker from '@/components/RangePicker/RangePicker.vue'

export default {
  components: { RangePicker },
  data() {
    return {
      queryTime: null,
      labelCol: {
        xs: { span: 4 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 20 },
        sm: { span: 18 }
      },
      // 查询条件
      selectQuery: {
        // 公司
        company: '1771136798305476610',
        // 车间
        workshop: '2',
        // 工序
        productCategory: '1',
        // 机台号
        deviceNo: '1',
        // 开始时间
        startTime: undefined,
        // 结束时间
        endTime: undefined,
        pageSize: -1
      },
      gxOption1: [],
      // 设备机台
      deviceList: [],
	  lineData:[],
      // 显示工序和机台的对应关系
      /*
      * productCategory（细纱1；粗纱2；头并4；末并5；梳棉6；抓棉7；多仓8；精开棉9；络筒10；打包11）
        workingProcedure（清花1；梳棉2；并条4；粗纱5；细纱6；络筒7；打包8；）
        清花对应：抓棉、多仓、精开棉；并条对应：头并、末并
      * */
      workingProcedure: {
        // 细纱1 -> 细纱6
        1: 6,
        // 粗纱2 -> 粗纱5
        2: 5,
        // 抓棉7 -> 清花1
        7: 1,
        // 多仓8 -> 清花1
        8: 1,
        // 精开棉9 -> 清花1
        9: 1,
        // 头并4 -> 并条4
        4: 4,
        //末并5 -> 并条4
        5: 4,
        // 梳棉6  -> 梳棉2
        6: 2,
        // 络筒10  -> 络筒7
        10: 2,
        // 打包11 -> 打包8
        11: 8
      }
    }
  },

  mounted() {
    this.onSearch()
  },
  watch: {
    'selectQuery.workshop'() {
      this.getDeviceList()
    },
    'selectQuery.productCategory'() {
      this.getDeviceList()
    },
    selectQuery: {
      handler() {
        const data = Object.keys(this.selectQuery)
        for (let i = 0; i < data.length; i++) {
          if (!this.selectQuery[data[i]]) {
            return
          }
        }
        this.onSearch()
      },
      deep: true
    }
  },
  methods: {
    getDeviceList() {
      this.selectQuery.deviceNo = undefined
      this.deviceList = []
      // 车间和工序都选才去查询
      if (!this.selectQuery.workshop || !this.selectQuery.productCategory) {
        return
      }
      const params = {
        workshop: this.selectQuery.workshop,
        workingProcedure: this.workingProcedure[this.selectQuery.productCategory],
        pageSize: -1
      }
      getAction('/crm_device/crmDevice/list', params).then(res => {
        this.deviceList = res.result.records
      })
    },
    onSearch() {
      const data = Object.keys(this.selectQuery)
      for (let i = 0; i < data.length; i++) {
        // if (!this.selectQuery[data[i]]) {
        //   this.$message.warning('请选择完整的查询条件')
        //   return
        // }
      }
      getAction('/ds_device_real_time_status/dsDeviceRealTimeStatus/getElectricityLineChartData', this.selectQuery).then(res => {
        console.log('电流折线图', res)
		
		if (res.code == 200) {
		  let arr = res.result
		  let time = [],
		    speed = [],
		    ia = []
		  arr.map(item => {
		    let timeParams = item.create_time.split(' ')[1]
		    time.push(timeParams)
		    speed.push(parseFloat(item.llxs))
		    ia.push(parseFloat(item.ia))
		  })
		  this.lineData = {
		    time: time,
		    speed: speed,
		    ia: ia
		  }
		  this.$nextTick(() => {
		    this.getEchartsData()
		    this.loading = false
		  })
		}
      })
    },

    onChange() {
      console.log('改变了数据')
      this.selectQuery.startTime = this.queryTime[0]
      this.selectQuery.endTime = this.queryTime[1]
    },
    getEchartsData() {
		if (this.$refs.lineEchart) {
		  var lineEchart = this.$echarts.init(this.$refs.lineEchart)
		  let speedMax = 30
		  let iMax = 30
		  let option = {
		    tooltip: {
		      trigger: 'axis',
		      textStyle: {
		        color: '#ffffff',
		        fontSize: 13
		      },
		      padding: 10,
		      backgroundColor: 'rgba(66, 66, 89, 0.8)',
		      formatter: function(params) {
		        var result =
		          '<div style="font-size:14px;font-weight:600;margin-bottom:4px">' + params[0].axisValue + '</div>'
		        params.forEach(function(item, index) {
		          result +=
		            '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
		            item.color +
		            '"></span>'
		          result += item.seriesName + '：' + item.data
		          let unit = item.seriesName == '罗拉线速度' ? 'M/min' : 'A'
		          result += unit + '<br>'
		        })
		        return result
		      }
		    },
		    legend: {
		      top: 10,
		      left: 'center',
		      data: ['罗拉线速度', '电流'],
		      icon: 'circle',
		      textStyle: {
		        color: '#000000'
		      }
		    },
		    grid: {
		      left: 30,
		      right: '2%',
		      bottom: 0,
		      containLabel: true
		    },
		    xAxis: {
		      type: 'category',
		      boundaryGap: true,
		      data: this.lineData.time,
		      axisTick: {
		        show: false
		      },
		      axisLabel: {
		        color: 'rgb(121,203,250)',
		        fontSize: 13
		      },
		      axisLine: {
		        lineStyle: { color: 'rgb(121,203,250)' }
		      }
		    },
		    yAxis: [
		      {
		        name: '单位：(M/min)',
		        nameTextStyle: {
		          color: 'rgb(121,203,250)'
		        },
		        type: 'value',
		        min: 0,
		        max: speedMax,
		        splitNumber: 5,
		        interval: speedMax / 5,
		        axisTick: { show: false },
		        axisLine: { show: false },
		        axisLabel: {
		          show: true,
		          fontSize: 13,
		          textStyle: {
		            color: 'rgb(121,203,250)'
		          }
		        },
		        splitLine: {
		          lineStyle: {
		            color: 'rgb(121,203,250,0.5)',
		            type: 'dotted'
		          }
		        }
		      },
		      {
		        name: '单位：(A)',
		        nameTextStyle: {
		          color: 'rgb(121,203,250)'
		        },
		        type: 'value',
		        min: 0,
		        max: iMax,
		        splitNumber: 5,
		        interval: iMax / 5,
		        nameLocation: 'end',
		        axisLine: { show: false },
		        axisTick: { show: false },
		        splitLine: { show: false },
		        axisLabel: {
		          show: true,
		          fontSize: 13,
		          textStyle: {
		            color: 'rgb(121,203,250)'
		          }
		        }
		      }
		    ],
		    series: [
		      {
		        name: '罗拉线速度',
		        color: 'rgb(153,247,122)',
		        type: 'line',
		        yAxisIndex: 0,
		        symbol: 'none',
		        data: this.lineData.speed,
		        areaStyle: {
		          color: {
		            type: 'linear',
		            x: 0,
		            y: 0,
		            x2: 0,
		            y2: 1,
		            colorStops: [
		              {
		                offset: 0,
		                color: 'rgba(153,247,122,0.5)'
		              },
		              {
		                offset: 1,
		                color: 'rgba(153,247,122,0)'
		              }
		            ],
		            global: false
		          }
		        }
		      },
		      {
		        name: '电流',
		        color: 'rgb(244,182,63)',
		        type: 'line',
		        yAxisIndex: 1,
		        symbol: 'none',
		        data: this.lineData.ia,
		        areaStyle: {
		          color: {
		            type: 'linear',
		            x: 0,
		            y: 0,
		            x2: 0,
		            y2: 1,
		            colorStops: [
		              {
		                offset: 0,
		                color: 'rgba(244,182,63,0.5)'
		              },
		              {
		                offset: 1,
		                color: 'rgba(244,182,63,0)'
		              }
		            ],
		            global: false
		          }
		        }
		      }
		    ]
		  }
		  lineEchart.setOption(option)
		  window.addEventListener('resize', function() {
		    lineEchart.resize()
		  })
		}
    }
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose()
    }
  }
}
</script>

<style lang="less" scoped>
.graph {
  width: 100%;

  height: 70vh;
}
/deep/ .ant-col-6 {
  width: 21.7%;
}
</style>
